<template>
  <div>
    <myheader></myheader>

    <br /><br />

    <br /><br />
    <Breadcrumb :datas="datas"></Breadcrumb>

    <section class="featured-block text-center">

      <div class="container">
        <!-- 显示图片 -->
        <Avatar :src="src" :width='150' fit='fill'></Avatar>
        
        <br />
        <br />
        上传进度：{{ imgLoad }}
        <br />
        <br />
        <input type="file" @change="upload">
        <br />
		
        七牛云上传:<input type="file" @change='upload_qiniu' />
		<br><br>
		
	  </div>

    </section>

	
  </div>
</template>

<script>
import myheader from "./myheader";
import myfooter from "./myfooter";

export default {
  // 定义组件
  components: {
    myheader: myheader,
    myfooter: myfooter
  },
  data() {
    return {
      datas: [{ title: "首页", route: { name: "index" } },{ title: "我的页面" }],
	  file: "",
	  code:"",
	  src: "",
	  mysrc:"",
	  uptoken: "",
	  //进度展示
	  imgLoad:'',
	  //修改密码
	  
	  

    
    };
  },
  mounted() {
    // 获取密钥
    this.get_token();
    //获取用户信息
    this.get_userinfo()

  },

  methods: {

    //获取用户信息
    get_userinfo:function(){
       //发送请求
		  this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem('uid')}}).then((result) =>{
		  console.log(result);
		  //动态赋值
      this.src = 'http://localhost:8000/static/upload/'+result.data.img;
      
	  })

    },
	 
	  //提交用户修改
	  submit:function(){
		  //发送请求
		  this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem('uid'),img:this.mysrc}}).then((result) =>{
		  console.log(result);
		  //动态赋值
		  this.$Message(result.data.message)
	  })

	  },

    // 上传七牛云
		upload_qiniu(e) {
		this.plan = true;
		// 声明文件对象
		let file = e.target.files[0];
		// 声明参数类型
		let param = new FormData();
		// 添加文件
		param.append("file", file);
		param.append("token", this.uptoken);
		// 定制axios请求
		const axios_qiniu = this.axios.create({ withCredentials: false });

		axios_qiniu({
			method: "post",
			url: "http://up-z1.qiniu.com/",
			data: param,
			timeout: 30000,
			//上传捕捉进度方法 下载进度：onDownload
			onUploadProgress:(e)=>{

				//计算进度 loaded 已经上传的进度
			let complete = (e.loaded / e.total)
			if (complete <1 ){
				//小于1  就是未完成
				//手动弄成2位小数   让它永远到不了1
				this.imgLoad = (complete * 100).toFixed(2)+'%';
			}
        }
      }).then(resp => {
        console.log(resp);
        this.imgLoad = '100%';
       
      });
    },
    get_token() {
      this.axios({
        url: "http://127.0.0.1:8000/uptoken/"
      }).then(resp => {
        console.log(resp);
        // 动态赋值
        this.uptoken = resp.data.uptoken;
      });
    },
    upload: function(e) {
      // 声明文件对象
      let file = e.target.files[0];
      // 声明参数类型
      let param = new FormData();
      // 添加文件
      param.append("file", file);
      // 声明上传文件头部
      let config = { "Content-Type": "multipart/form-data" };
      // 发送请求
      this.axios.post('http://localhost:8000/uploadfile/',param,config).then((result) =>{
		  console.log(result);
		  //动态赋值
		  this.src = 'http://localhost:8000/static/upload/'+result.data.filename;
		  this.mysrc = result.data.filename
	  })
        
      
    }
  }
};
</script>

<style>
</style>